<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sunnyday</title> 
 
    
    <link rel="stylesheet" type="text/css" href="./css/sunnyday.css"> 
</head>
<body>
    <script>
         alert("版权所有©福建师范大学19级\n软工二班刘行风、软工二班黄家明");
        alert("                        (/≧▽≦)/【答应我一定得看完】\n 天气预报使用须知：【所显示效果不佳，实属浏览器特色（浏览器不同，效果不同)】 (ˉ▽￣～) \n 1.首页面实属装饰，下拉进入搜索功能  \n 2.点击切换显示状态可在当日天气与一周天气之间切换 \n 3.点击首页面右上角点击天气地图可查看天气地图 \n 4.暂时只支持首页面的切换皮肤，若要切换皮肤请回到首页面  \n                            【祝您使用愉快】");
    </script>
    <div class="act">
        
        
      
        <div class="pic">
          <img src="img/sunnyday.png" width="100" height="60">
          
       </div>
        <center><h2 id="word" style="display:none;">你我行走在苍穹之下，渺小如尘埃，为了未来而奔波，为了梦想而耕耘，为了爱情而追寻。寻一个人，与你分担寒潮、风雷、霹雳，共享雾霭、流岚、虹霓，无畏天寒与酷暑。我们都是人生路上跋涉而行的旅人，漫漫路途，会遇见小确幸，也会遭逢小确丧。好天气是锦上添花，可若遇上了坏天气，也不能让它雪上加霜。生活本就不易，自在前行是最美好的姿态。</h2></center>
        
        <h2 id="show">
            
        </h2>
    </div>
    <div class="masked">
        <h3>☠下拉以搜索☠</h3>
    </div>
    <header>
        <div class="wavy">
    
            <span style="--i:1">s</span>
            <span style="--i:2">u</span>
            <span style="--i:3">n</span>
            <span style="--i:4">n</span>
            <span style="--i:5">y</span>
            <span style="--i:6">D</span>
            <span style="--i:7">a</span>
            <span style="--i:8">y</span>&emsp;&emsp;&emsp;&emsp;
            
          </div>
          <div class="clock">
            <span id = "p1" class="item">
          </div>
         
        <ul class="nav" > 
            <li><a href="index.html">首页</a></li>
            <li><a href="#">更换主题&emsp;</a>
                <ul >
                    <li><img src="img/6.jpg"></li>
                    <li><img src="img/14.jpg"></li>
                    <li><img src="img/15.jpg"></li>
                    <li><img src="img/3.jpg"></li>
                    <li><img src="img/10.jpg"></li>
                    <li><img src="img/s.jpg"></li>
                   
                    
                 </ul>
            </li>
            
            <li><a href="#" @click="author">&emsp;&emsp;&emsp;&emsp;</a></li>
        </ul> 
      
      
        
       
    </header>
       <div class="" id="app">
        <div class="amap"><a href="#" @click="showMap">天气地图</a></div>
        <div class="map" v-if="showmap">
            <iframe src="map.html"class="iframemap" name="a" scrolling="no" hspace="-100" vspace="-150"></iframe>
        </div>
        <section class="banner">
            <div class="weatherbg" id="weatherbgc">
                <div class="weatherboeder" id="weatherbd">
                   
                    <div class="searchinput">
                        <center><span class="message1" id="m1" @click="changeShow" onClick="changemes()"></span><br></br></center>
                        <input class="btn" type="text"  id ="input" onClick="change()" placeholder="搜索查看当日天气" v-model="city" @keyup.enter="searchWeather"@keyup.enter="alert">
                
                    </div>
                    <div class="weathershow">
                        <div class="weathernone" id="weathertu" ref="weathertu" v-show="Showone" ></div>
                       
                        <div class="weatherlistshow" v-show="Showone">
                            
                            <ul class="weather_list" >
                                
                                <li v-for="(item , index) in weatherList" v-if="index < 1">
                                    <div class="type">
                                        <span class="iconfont" id="weatype" >{{ item.weather}}</span></div>
                                    <div class="temp">
                                      <b>{{ item.lowest }}</b>
                                      ~
                                      <b>{{ item.highest }}</b>
                                    </div>
                                   
                                    <div class="date"><span>{{ item.date }}</span></div>
                                    <div class="date"><span>{{ item.wind + item.windsc}}</span></div>
                                  
                                </li>
                              </ul>
                              
                        </div>
                        <div class="weatherword" v-for="(item , index) in weatherList" v-if="index < 1" v-show="showword"><span>{{ item.tips}}</span></div>
                        <div class="weatherlistshow2" v-show="Showweek">
                            
                            <ul class="weather_list" >
                                
                                <li v-for="(item , index) in weatherList" v-if="index < 7">
                                  <div class="type">
                                      <span class="iconfont" id="type">{{ item.weather}}</span></div>
                                  <div class="temp">
                                    <b>{{ item.lowest }}</b>
                                    ~
                                    <b>{{ item.highest }}</b>
                                  </div>
                                  <div class="date"><span>{{ item.date }}</span></div>
                                  <div class="date"><span>{{ item.wind + item.windsc}}</span></div>
                                  
                                </li>
                              </ul>
                              
                        </div>
                        
                        <div class="weatherwords" v-for="(item , index) in weatherList" v-if="index < 1" v-show="showtips"><span>{{ item.tips}}</span></div> 
                    </div>
                </div>    
            </div>
        </div>
        </section>
        
    <script>
        window.addEventListener('scroll', () => {
            let header =document.querySelector('header')
            header.classList.toggle('sticky',window.scrollY>0)
        })
               
        
       
    </script>
        <script>
            function change(){
              
              document.getElementById("weatherbgc").className="weatherbgfocous";
              document.getElementById("m1").innerHTML="点击切换显示状态";
            }

           
                
            
         </script>
       <script>
        var nav=document.querySelector('.nav');
        var lis=nav.children;
        for(var i=0;i<lis.length;i++){
            lis[i].onmouseover=function(){
                this.children[1].style.display=style='block';
            }
            lis[i].onmouseout=function(){
                this.children[1].style.display=style='none';
            }
        }
        //1.获取元素
        var imgs = document.querySelector('.nav').querySelectorAll('img');
    //.2.注册事件
        for(var i=0; i<imgs.length; i++){
            imgs[i].onclick =function(){
                document.body.style.backgroundImage='url('+this.src+')';
                
            }
        }
    </script>
    
    
      <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script >
        var app = new Vue({
    
    el:"#app",
    data:{
        city:'',
        weatherList:[],
        Showone:true,
        Showweek:false,
        showmap:false,
        showtips:false,
        showword:true
        
    },
    methods:{
        
         
           searchWeather(city){
           //console.log('天气查询');
           console.log(this.city);
           
           this.weatherList.length=1;
           var that =this;
           
           axios.get('http://api.tianapi.com/txapi/tianqi/index?key=1456b567f636d461669eba2549ca5a90&city='+this.city)
           
           .then(function(response){
            console.log(response);
            console.log(response.data.newslist);
            that.weatherList=response.data.newslist;
            console.log(response.data.newslist[0].weatherimg)
            var a= response.data.newslist[0].weatherimg;
            console.log(a);
            
                
            if(a=='yin.png'||a=='yun.png'){
                document.querySelector('#weathertu').className="weather cloudy";
            }else if(a=="qing.png"){
                document.querySelector('#weathertu').className="weather sunny";
            }else if(a=="xue.png"){
                document.querySelector('#weathertu').className="weather snowy";
            }else if(a=="yu.png"){
                document.querySelector('#weathertu').className="weather rainy"; 
            }
           
           })
           .catch(function(err){

           }),
           function(){

           }
        },
        
        changeShow:function(){
            this.Showweek= !this.Showweek;
            this.Showone = !this.Showone;
            this.showtips=!this.showtips;
            this.showword=!this.showword;
          },
        showMap:function(){
            this.showmap =!this.showmap;
            
        },


         
    }, 
})

function toDate(n){
    if(n<10){
        return '0'+n;
    }else{
        return ''+n;
    }
};

   

window.onload =function(){
     function trick(){
        var oDate = new Date();		/*Date对象*/
        var H = toDate(oDate.getHours());
        var M = toDate(oDate.getMinutes());
        var S = toDate(oDate.getSeconds());
        var t = H +":"+ M ;
        document.getElementById('p1').innerHTML = t;
    }
    setInterval(trick,1000);
    var story = document.getElementById('word');
    var s = document.getElementById('show');
    var i = 0;
    timer=setInterval(function(){
        s.innerHTML=story.innerHTML.substring(0,i);
        i++;
        if(s.innerHTML==story.innerHTML){
            clearInterval(timer);
        }
    },200);
}

   function showWeather(){
       document.getElement(item.type);
     if(item.type=="晴"){
        document.getElementById("weathertu").className="weather sunny";
      
     }else if(item.type=="多云"||item.type=="霾"){
        document.getElementById("weathertu").className="weather cloudy";
     }else if(item.type=="雨"){
        document.getElementById("weathertu").className="weather rainy";
     }else if(item.type=="雨夹雪"){
        document.getElementById("weathertu").className="weather snowy";
     }
}
    </script>

</body>
</html>